<template>
  <el-card shadow="hover" :style="{ flex: 1, marginTop: '12px' }">
    <!-- <template #header>
      <vab-icon icon="information-line" />
      我的事项

       <vab-link v-if="todoNum != 0" to="/messages">
        <el-tag class="card-header-tag">查看更多>></el-tag>
      </vab-link>
    </template> -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="待办事项" name="first">
        <template #label>
          <span>
            <el-icon><Memo /></el-icon>
            <text>&nbsp;待办事项</text>
            <i v-if="todoNum != 0" class="dbstyle" @click="gotoMessageList">
              {{ todoNum }}
            </i>
          </span>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="item in todoList"
            :key="item.label"
            placement="top"
            :timestamp="item.sendtime"
            :value="item.value"
            @click="handleDetail(item)"
          >
            <el-card class="cardhang">
              <div class="showNotice">
                <span class="title">{{ item.title }}</span>
                <span class="time">发送人：{{ item.sendername }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          <el-image
            v-if="todoList == null || todoList.length < 1"
            :src="getDataEmptyImg()"
            style="display: block; width: 30%; margin: 13% auto"
          />
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane label="预警信息" name="second">
        <template #label>
          <span>
            <el-icon><Bell /></el-icon>
            预警消息
            <i v-if="warnNum != 0" class="dbstyle" @click="gotoMessageList">
              {{ warnNum }}
            </i>
          </span>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="item in warnList"
            :key="item.label"
            placement="top"
            :timestamp="item.sendtime"
            :value="item.value"
          >
            <el-card class="cardhang">
              <div class="showNotice">
                <span class="title2">{{ item.title }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          <el-image
            v-if="warnList == null || warnList.length < 1"
            :src="getDataEmptyImg()"
            style="display: block; width: 30%; margin: 13% auto"
          />
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { getDataEmptyImg, backTableHeight } from "@/api/mains";
import { getTodoMsgList, getWarnMsgList } from "@/api/modules/user.ts";

export default {
  components: {},
  emits: ["dbnumfnc", "warnnumfnc"],
  setup(props, { emit }) {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      activeName: "first",
      todoList: [],
      warnList: [],
      url: "/system/message/query",
      todoNum: 0,
      warnNum: 0,
      listLoading: true,
      mainHeight: backTableHeight() + 55
    });

    //待办消息
    const getTodoList = async () => {
      state.listLoading = true;
      const res = await getTodoMsgList();
      state.todoList = res.data.rows;
      state.todoNum = res.data.total;
      emit("dbnumfnc", String(state.todoNum));
      state.listLoading = false;
    };

    //预警消息
    const getWarnList = async () => {
      const res = await getWarnMsgList();
      state.warnList = res.data.rows;
      state.warnNum = res.data.total;
      emit("warnnumfnc", String(state.warnNum));
    };

    const handleDetail = row => {
      try {
        router.push({
          name: row.url,
          params: { id: row.bid, isdeal: row.isdeal, backtype: "1" }
        });
      } catch (error) {
        console.info("路由跳转出错");
      }
    };

    //跳转到消息中心
    const gotoMessageList = () => {
      router.push({ name: "MessageList" });
    };

    watch(
      () => route.path,
      value => {
        if (value === "/index") getTodoList();
      }
    );

    getTodoList();
    getWarnList();

    return {
      ...toRefs(state),
      handleDetail,
      gotoMessageList,
      getDataEmptyImg
    };
  }
};
</script>
<style lang="scss" scoped>
.el-card {
  padding-bottom: 0;
  margin-bottom: 0;
  border-radius: 5px;
  .dbstyle {
    position: absolute;
    top: 3px;
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
    font-size: 12px;
    font-style: inherit;
    line-height: 20px;
    color: #ffffff;
    text-align: center;
    background-color: #ff0000f0;
    border-radius: 100%;
  }
  :deep() {
    .card-header-tag {
      cursor: pointer;
    }
    .el-card.is-always-shadow {
      box-shadow: inherit;
    }
    .el-timeline-item {
      padding-bottom: 0;
      overflow: scroll;
    }
    .el-card__body {
      padding: 8px 10px;
    }
    .el-timeline {
      height: 44vh;
      min-height: 421px;
      padding-left: 13px;
      overflow: scroll;
    }
    .el-tabs__nav-wrap::after {
      height: 0.5px;
      background-color: #ebeef5;
    }
    .el-tabs__item {
      height: 46px;
      line-height: 46px;
    }
  }
}
.cardhang:hover {
  cursor: pointer;
  background-color: #188fff31;
}
.showNotice {
  overflow: hidden;
  line-height: 25px;
}
.title {
  float: left;
  width: 65%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title2 {
  float: left;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.time {
  float: right;
  width: 30%;
  overflow: hidden;

  //   margin: 10px 0;
  font-size: 12px;
  color: #999999;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.noticeContent {
  display: -webkit-box;
  max-height: 100px;

  // padding-left: 20px;
  margin-top: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  color: #5a5454;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.noticeContent p {
  padding: 0;
  margin: 0;
}
</style>
